<template>
  <el-dialog v-model="visible" title="打印配置" width="500">
    <el-form :model="form" ref="formRef" labelWidth="100px">
      <el-form-item
        label="打印内容"
        prop="type"
        :rules="[
          {
            required: true,
            message: '请选择打印内容',
            trigger: 'blur',
          },
        ]"
      >
        <el-radio-group v-model="form.type">
          <el-radio :value="0" name="type"> 二维码+编码 </el-radio>
          <el-radio :value="1" name="type"> 编码 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="二维码宽度">
        <el-input-number v-model="form.width" :precision="2" :min="0" />
      </el-form-item>
      <el-form-item label="二维码高度">
        <el-input-number v-model="form.height" :precision="2" :min="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">
          确定
        </el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>

    <!-- <DialogEasyPrint ref="dialogEasyPrintRef"></DialogEasyPrint> -->
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
// import api from "@/api/label.js";
import { downloadFn } from "@/api/index.js";
// import DialogEasyPrint from "@/components/dialogEasyPrint.vue";

const props = defineProps({
  url: { type: String, default: "/admin-api/system/label/print" },
  ids: { type: Array, default: () => [] },
  batchno: { type: [String, Number], default: "" },
});
// const dialogEasyPrintRef = ref();
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const form = ref({
  type: 0,
  width: 4,
  height: 6,
});
const doPrint = (val) => {
  const ordonnance = document.getElementById(val).contentWindow;
  setTimeout(() => {
    ordonnance.print();
    loading.value = false;
  }, 100);
};

const printBtnClick = (record) => {
  const blob = new Blob([record], { type: "application/pdf;charset=utf-8" });
  var date = new Date().getTime();
  var ifr = document.createElement("iframe");
  ifr.style.frameborder = "no";
  ifr.style.display = "none";
  ifr.style.pageBreakBefore = "always";
  ifr.setAttribute("id", "printPdf" + date);
  ifr.setAttribute("name", "printPdf" + date);
  ifr.src = window.URL.createObjectURL(blob);
  document.body.appendChild(ifr);
  doPrint("printPdf" + date);
  window.URL.revokeObjectURL(ifr.src); // 释放URL 对象
};

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        const res = await downloadFn(props.url, form.value);
        if (res) {
          printBtnClick(res);
        }
      } finally {
        loading.value = false;
      }
    }
  });
};

const onCancel = () => {
  formRef.value.clearValidate();
  visible.value = false;
};
const openDialog = (val) => {
  if (val instanceof Array && val.length) {
    form.value.ids = val;
    visible.value = true;
  } else if (val) {
    form.value.batchno = val || props.batchno;
    visible.value = true;
  } else {
    ElMessage.error(`请选择需要打印的标签条！`);
  }
};

defineExpose({
  openDialog,
});
</script>
